<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-refresher (ionRefresh)="onRefresh($event)">
         <ion-refresher-content
           pullingIcon="arrow-dropdown"
           pullingText="松开!!立即刷新"
           refreshingSpinner="bubbles"
           refreshingText="刷新中...!!">
         </ion-refresher-content>
  </ion-refresher>

  <ion-list *ngIf="items.length > 0">
    <ion-item *ngFor="let item of items" tappable (click)="tabItemClick(item)">
      <h3>{{item.title}}</h3>
      <p>{{item.description}}</p>
      <!--<img src="{{item.imageUrl}}"><img>-->
      <!--<img [attr.src]="item.imageUrl"><img>-->
      <img-loader src="{{item.mediaPicUrl}}" [useImg]="true"></img-loader>
      <!--<img-loader src="{{item.mediaPicUrl}}" width="400px" height="400px" backgroundSize="contain" fallback="assets/imgs/logo.png"></img-loader>-->
    </ion-item>
  </ion-list>


  <!--<span style="color:#FF0000;">&lt;!&ndash;上拉加载&#45;&#45;当用户到达页脚或页脚附近时，ionInfiniteScroll指令允许你调用一个函数&ndash;&gt;-->
     <!--&lt;!&ndash;当用户滚动的距离超出底部的内容时，就会触发你指定的on-infinite&ndash;&gt;-->
    <!--在ion-content标签内增加下面的代码，很多童鞋上拉刷新实现不了，就是因为这段代码没有加到content标签内，因为只有在标签内的元素，才会有scroll的效果。-->
  <!--</span>-->

  <ion-infinite-scroll (ionInfinite)="onLoadMore($event)" distance="10%">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="加载更多...!!">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>


</ion-content>
